<template>
    <div>
         <v-progress-linear v-if="loading" indeterminate ></v-progress-linear>
         <v-app-bar app elevation="0" dense color="white">
            <v-btn icon @click="$router.go(-1)">
                <v-icon>mdi-arrow-left</v-icon>
            </v-btn>
            <v-toolbar-title class="text-center flex-grow-1 subtitle-1">身份认证</v-toolbar-title>
            <v-btn plain text :ripple="false">
            </v-btn>
        </v-app-bar>

        <v-container class="px-4">
            <v-alert color="primary"  dark v-if="kyc_status == -1" dismissible dense >
                {{kyc_name}}, 请更正信息
             </v-alert>
            <v-row align="center">
                <v-col cols="3">
                    <span class="subtitle-2">您的姓名</span>
                </v-col>
                 <v-col cols="9">
                      <v-text-field class="rounded-pill"
                        dense
                        solo
                        flat
                        hide-details
                        placeholder="姓名"
                        v-model="kyc_realname"
                        clearable
                        :disabled="!editable"
                        >
                    </v-text-field>
                </v-col>
                <v-col cols="3">
                    <span class="subtitle-2">您的电话</span>
                </v-col>
                 <v-col cols="9">
                      <v-text-field class="rounded-pill"
                        dense
                        solo
                        flat
                        hide-details
                        placeholder="电话号码"
                        clearable
                        v-model="kyc_mobile"
                         :disabled="!editable"
                        >
                    </v-text-field>
                </v-col>
                <v-col cols="3">
                    <span class="subtitle-2">身份证号码</span>
                </v-col>
                <v-col cols="9">
                      <v-text-field class="rounded-pill"
                        dense
                        solo
                        flat
                        hide-details
                        placeholder="身份证号码"
                        clearable
                        v-model="kyc_idcard"
                         :disabled="!editable"
                        >
                    </v-text-field>
                </v-col>




                <v-col cols="3">
                    <span class="subtitle-2">抢单城市设置</span>
                </v-col>
                <v-col cols="9">
                    <v-container>
                        <!-- 添加标签的输入框 -->
                        <v-text-field
                            v-model="newTag"
                            label="列：四川省，苏州市..."
                            label-class="text-h6"
                            append-icon="mdi-plus"
                            @click:append="addTag"
                            @keydown.enter="addTag"
                            clearable
                        ></v-text-field>
                        <div style="font-size: 0.8rem;color: #6a6868">1：点击这里输入需要开通抢单的整个省，或者城市（比如四川省，或者成都市，省和市后缀不能少）</div>
                        <div style="font-size: 0.8rem;color: #6a6868;margin-top: 5px">2：点击旁边的“+”进行确认保存抢单城市</div>
                        <!-- 标签展示区域 -->
                        <v-chip
                            v-for="(tag, index) in tags"
                            :key="index"
                            class="ma-2"
                        >
                            {{ tag }}
                            <v-icon
                                right
                                @click="removeTag(index)"
                            >
                                mdi-close-circle
                            </v-icon>
                        </v-chip>
                    </v-container>
                </v-col>




                <v-col cols="12">
                    <span class="subtitle-2">身份证正反面</span>
                </v-col>
                 <v-col cols="12">
                    <v-card  elevation="0" class="rounded-lg">
                        <v-row no-gutters dense>
                            <v-col cols="12" class="d-flex justify-center mb-4 mt-4">
                                <ImageUpload
                                    v-model="kyc_image_face"
                                    :height="120"
                                    background-image=""
                                    :disabled="!editable"
                                    placeholder="身份证正面"></ImageUpload>
                            </v-col>
                             <v-col cols="12" class="d-flex justify-center mb-4">
                                <ImageUpload
                                    v-model="kyc_image_back"
                                    :height="120"
                                    placeholder="身份证反面"
                                    :disabled="!editable">
                                </ImageUpload>
                            </v-col>
                        </v-row>
                    </v-card>
                </v-col>

                <v-col cols="12">
                    <v-btn block rounded depressed large v-if="editable" :loading="saving" @click="save()" color="primary">提交</v-btn>
                    <v-btn block rounded depressed large v-if="kyc_name == '认证成功'" :loading="saving" @click="save()" color="primary">认证成功，重新提交</v-btn>
                    <v-btn block rounded  depressed large v-if="!editable && kyc_name != '认证成功'" color="primary" outlined>{{kyc_name}}</v-btn>
                </v-col>
            </v-row>

        </v-container>


    </div>
</template>

<script>
import axios from "axios";
import { mapGetters } from 'vuex';
import ImageUpload from "../../widgets/ImageUpload.vue";

export default {
    data: () => ({
        loading: false,
        saving: false,
        kyc_realname: '',
        kyc_mobile: '',
        kyc_idcard: '',
        kyc_image_face: '',
        kyc_image_back: '',
        kyc_name: '',
        kyc_info: {},
        newTag: '',      // 新标签输入
        tags: [],        // 已存在标签数组
        kyc_status: 0,
    }),
    components: {
        ImageUpload,
    },

    computed: {
        editable() {
            return this.kyc_status == 0 || this.kyc_status == -1;
        },
        ...mapGetters([
            'uid'
        ]),
    },

    created() {
        this.load();
    },

    methods: {
        addTag() {
            if (this.newTag && this.newTag.trim()) {
                // 防止重复添加
                if (!this.tags.includes(this.newTag.trim())) {
                    this.tags.push(this.newTag.trim())
                }
                this.newTag = '' // 清空输入框
            }
        },
        removeTag(index) {
            console.log('删除')
            this.tags.splice(index, 1) // 通过索引删除标签
        },
        load() {
            const that = this;
            that.loading = true;
            axios.get(`/v1/user/kyc`).then((response) => {
                if (response.data.code == 0) {
                    that.kyc_name = response.data.data.kyc_name;
                    that.kyc_info = response.data.data.kyc_info;
                    that.kyc_status = response.data.data.kyc_status;
                    if (that.kyc_info) {
                        that.kyc_realname = that.kyc_info.realname
                        that.tags = that.kyc_info.address_tag ?? []
                        that.kyc_mobile = that.kyc_info.mobile
                        that.kyc_idcard = that.kyc_info.idcard
                        that.kyc_image_face = that.kyc_info.image_face
                        that.kyc_image_back = that.kyc_info.image_back
                    }
                 } else {
                    that.$toasted.show(response.data.msg, {type: "error"});
                 }
            })
            .catch(function () {})
            .then(function () {
                that.loading = false;
            });
        },

        save() {

            if (this.kyc_mobile.length <= 0) {
                this.$toasted.show('请填写手机号', {type: "error"});
                return;
            }

            if (this.kyc_realname.length <= 0) {
                this.$toasted.show('请填写姓名', {type: "error"});
                return;
            }

            if (this.kyc_idcard.length <= 0) {
                this.$toasted.show('请填写身份证号', {type: "error"});
                return;
            }

            if (this.kyc_image_face.length <= 0) {
                this.$toasted.show('请上传身份证正面照片', {type: "error"});
                return;
            }

            if (this.kyc_image_back.length <= 0) {
                this.$toasted.show('请上传身份证反面照片', {type: "error"});
                return;
            }

            if (this.tags.length <= 0) {
                this.$toasted.show('抢单城市必须设置');
                return;
            }

            const that = this;
            that.saving = true;
            axios.post(`/v1/user/kyc`, {
                    mobile: this.kyc_mobile,
                    realname: this.kyc_realname,
                    idcard: this.kyc_idcard,
                    image_face: this.kyc_image_face,
                    tags: this.tags,
                    image_back: this.kyc_image_back,
                }).then((response) => {
                if (response.data.code == 0) {
                    that.load();
                    that.$toasted.show(response.data.msg);
                 } else {
                    that.$toasted.show(response.data.msg, {type: "error"});
                 }
            })
            .catch(function () {})
            .then(function () {
                that.saving = false;
            });
        }
    }
};
</script>

<style lang="scss" scoped>

</style>
